<template>
	<view class="container">
		<view class="header-info">
			<view class="user">
				<image class="author" src="../../static/logo.png" mode=""></image>
				<text class="name">点击头像获取用户信息</text>
			</view>


		</view>
		<view class="content-box">
			<view class="empty" v-if="!qrCodeDataStatus">
				点击下方按钮二维码，添加设备
			</view>
			<view v-else class="equipment-content">
				<view class="equipment-number">
					<text class="title">设备ID</text>
					<text class="data">{{deviceCodeShow}}</text>
				</view>
				<view class="equipment-tabs">
					<view class="tab" @click="goReal()">
						实时状态
					</view>
					<view class="tab" @click="goOprate1()">
						运行记录
					</view>
					<view class="tab" @click="goDevice()">
						设备信息
					</view>
				</view>
			</view>
		</view>
		<view class="qr-code-box" @click="handleScan">
			<uni-icons type="scan" size="60" color='#ffffff'></uni-icons>
		</view>
	</view>
</template>

<script>
	// import http from '../../utils/http'
	
	export default {
		data() {
			return {
				qrCodeDataStatus:true,
				deviceCode:"", 
				deviceCodeShow:"", 
				navigateobject:{
					"real":'/pages/real-time/RealTime',
					"equipment":'/pages/equipment/Equipment',
					"operation":'/pages/operation-record/OperationRecord'
				}
			}
		}, 
		onLoad(option) {
			
			 console.log("onLoad 》》"+option)
			 let that=this;
			 console.log(that.$api)
			  
			 let {
			 	scene 
			 } = option
			 console.log("onLoad 》》"+option.scene)
			 //接受到参数 方式一 这个可能是uniapp 的params 自动获取的参数 挺强大的
			 if (option.scene) {
				 this.deviceCode=option.scene
				 console.log("deviceCode"+ this.deviceCode)
				 
				 if(this.deviceCode.length>16){
				 	 this.deviceCodeShow=this.hideStringMiddle(this.deviceCode, 3, this.deviceCode.length-13);
				 }
				  
				  
			 }			
		},
		methods: {  
			
			hideStringMiddle(str, start, end) {
			      let hiddenStr = '';
			      if (str.length > end) {
			        hiddenStr = str.substring(0, start) + new Array(6).join('*') + str.substring(end + 1);
			      }
			      return hiddenStr;
			},
			handleScan(){
				console.log('开始扫描')
				uni.scanCode({
					scanType: ['qrCode'],
					success:  (res)=> {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						this.qrCodeDataStatus=true
						this.deviceCode=res.result
						if(this.deviceCode.length>16){
							 this.deviceCodeShow=this.hideStringMiddle(this.deviceCode, 3, this.deviceCode.length-13);
						}
						console.log("deviceCodeShow"+ this.deviceCodeShow)
					}
				});
			},
			goDevice(){
				console.log('goDevice'+this.deviceCode)
				if(this.deviceCode){
					const url = '/pages/equipment/Equipment'  +'?deviceSerialNum='+this.deviceCode;
					uni.navigateTo({
						url: url
					})						
					
				}
				
			},
			goOprate(){
				console.log('goDevice'+this.deviceCode)
				if(this.deviceCode){
					const url = '/pages/operation-record/OperationRecord'  +'?deviceSerialNum='+this.deviceCode;
					uni.navigateTo({
						url: url
					})						
					
				}
				
			},
			goReal(){
				console.log('goDevice'+this.deviceCode)
				if(this.deviceCode){
					const url = '/pages/real-time/RealTime'  +'?deviceSerialNum='+this.deviceCode;
					uni.navigateTo({
						url: url
					})						
					
				}
				
			},
			 
		}
	}
</script>

<style lang="scss">
	.header-info {
		background: linear-gradient(to bottom, #4994ed, 70%, #c0e0ff 90%, #FFFFFF);
		height: 400rpx;

		.user {
			display: flex;
			align-items: center;
			padding: 30rpx;

			.author {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				margin-right: 30rpx;
			}

			.name {
				color: #ffffff;
			}
		}

	}
	.content-box{
		margin:0 30rpx;
		margin-top: -150rpx;
		box-shadow: rgba(0, 0, 0, 0.08) 0rpx 0rpx 6rpx 2rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		overflow: hidden;
		.empty{
			height:400rpx;
			text-align: center;
			line-height: 400rpx;
			color: #cccccc;
			font-size: 36rpx;
		}
	}
	.qr-code-box{
		width:150rpx;
		height:150rpx;
		border-radius: 50%;
		background-color: #4994ed;
		position: fixed;
		left: 50%;
		transform: translateX(-50%); 
		bottom: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.equipment-content{
		height: 250rpx;
		display: flex;
		flex-direction: column;
		.equipment-number{
			flex:1;
			padding:0 20rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #f1f1f1;
			.title{
				color:#959595;
				font-size: 30rpx;
				margin-right: 30rpx;
			}
			.data{
				font-size: 36rpx;
				font-weight: 600;
				color:#333333;
			}
		}
		
		.equipment-tabs{
				flex:1;
				display: flex;
				align-items: center;
				.tab{
					flex:1;
					height: 100%;
					border-right:1rpx solid #f1f1f1;
					display: flex;
					align-items:center;
					justify-content: center;
					font-size: 30rpx;
					color: #050505;
					
				}
				.tab:last-child{
					border:none;
				}
		}
	}
</style>